<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>yikayun</title>
	<jsp:include page="../common/resources.jsp"/>
    <link rel="stylesheet" type="" href="/css/index.css">
    <link rel="stylesheet" type="" href="/css/swiper-3.4.2.min.css">
</head>

<body>
   	<jsp:include page="../common/header.jsp"/>
    <!-- 轮播图区域 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
        	<c:forEach var="banner" items="${vo.bannerList }">
        		<div class="swiper-slide"><a href="${banner.url }"><img src="${banner.imgUrl }" alt="${banner.title }"></a></div>
        	</c:forEach>
        </div>
        <!--分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    </div>
    <!-- 菜单栏区域 -->
    <div class="menu">
    	<div class="totalType">
            <span>版式</span>
            <ul class="style clearfix">
                <li class="total">全部</li>
                <c:forEach var="item" items="${vo.templetFormatTypeList}">
                	<a href="/index/query?formatStyle=${item.code }"><li>${item.name }</li></a>
                </c:forEach>
            </ul>
        </div>
        <div class="totalCard">
            <span>风格</span>
            <ul class="style clearfix">
                <li class="staff">全部</li>
                <c:forEach var="item" items="${vo.templetStyleList}">
                	<a href="/index/query?code=${item.code }&typeCode=${item.typeCode }"><li>${item.name }</li></a>
                </c:forEach>
            </ul>
        </div>
        <div class="totalCard">
            <span>用途</span>
            <ul class="total-card clearfix">
                <li class="staff">全部</li>
                <c:forEach var="item" items="${vo.templetUseList }">
                	<a href="/index/query?code=${item.code }&typeCode=${item.typeCode }"><li>${item.name }</li></a>
                </c:forEach>
            </ul>
        </div>
        <div class="paixu">
            <span>排序</span>
            <ul class="rank clearfix">
                <li class="update"><i class="iconfont icon-redo"></i>最近更新</li>
                <li><i class="iconfont icon-xiazai"></i>使用量</li>
            </ul>
        </div>
    </div>
    <!-- 主体内容区域 -->
    <div class="content">
        <div class="content-moudle">
            <ul class="clearfix first-ul">
                <li class="blank-moudle">
                    <div>
                        <i class="iconfont icon-jia"></i>
                        <p class="text-moudle">
                            创建一个空白模板
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">28点券</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">129点券</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-moudle">
            <ul class="clearfix">
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">28点券</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">129点券</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-moudle">
            <ul class="clearfix">
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">免费</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">28点券</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
                <li>
                    <div class="content-photos"><a href="#"><img src="./images/myOrderImg.jpg" alt=""></a></div>
                    <div class="content-text">
                        <p>清爽白色员工</p>
                        <p> <span class="free">129点券</span>
                            <span><i class="iconfont icon-kanguo"></i>1662</span>
                            <span><i class="iconfont icon-xihuan"></i>54</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 分页器区域 -->
    <div class="sorter">
        <div class="triangle-left">
            <div class="left"></div>
        </div>
        <ul class="paging clearfix">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>...</li>
            <li>N</li>
        </ul>
        <div class="triangle-right">
            <div class="right"></div>
        </div>
        <div class="sureBtn">
            <span style="font-size:12px;color: #989898">跳到</span>
            <input type="text" class="square">
            <button>确定</button>
        </div>
    </div>
   	<jsp:include page="../common/footer.jsp"/>
    <div class="hide-container" <c:if test="${ empty userInfo }">style="display:block;"</c:if>>

    </div>
    <div class="hide-content">
        <img src="./images/myOrderImg.jpg" alt="">
        <p class="hide-text">注意文字限制两行 蓝色简洁清新名片卡公司员工蓝色简洁清新名片卡公司员工蓝色简洁清新名片卡公司员工</p>
        <p class="price"> <span class="money">129元</span>
            <span><i class="iconfont icon-kanguo">1662</i></span>
            <span class="num"><i class="iconfont icon-xihuan">54</i></span>
        </p>
        <div class="btn">
            <button>下载源文件</button>
            <button>立即使用</button>
        </div>
    </div>
</body>
<jsp:include page="../common/jsResources.jsp"/>
<script src="/js/swiper-3.4.2.min.js"></script>
<script src="/js/index.js"></script>
</html>